import React, {Component} from 'react';
import {StyleSheet, View, Image, Text, FlatList, TouchableOpacity} from 'react-native';
import utils from '../../../common/utils';

const width = utils.getScreen().width;
export default class extends Component {
    //初始值
    state = {
        imgList: [
            'https://c.vpimg1.com/upcb/2018/03/20/180/_PC_xjay.jpg',
            'https://c.vpimg1.com/upcb/2018/03/21/87/KENZO4.jpg',
            'https://d.vpimg1.com/upcb/2018/03/20/110/pcb52.jpg',
            'https://d.vpimg1.com/upcb/2018/03/20/79/misssixty_grow.jpg',
            'https://c.vpimg1.com/upcb/2018/03/20/177/PC2_wnkx.jpg',
            'https://d.vpimg1.com/upcb/2018/03/21/174/PC_gyxt.jpg'
        ],
        titleList: [
            ' 韩都衣舍HSTYLE角色扮演女装专场'
            , '塔丹奴TADANNU 春之歌 上新女装专场'
            , '鹿皇羊女装专场'
            , '玖姿JUZUI女装专场'
            , 'LA.TENDRE-5折清仓 女装专场'
            , '韩国naning9明星衣橱女装专场'
            , '羊绒清仓，捡漏别错过'
            , '梵希蔓VIMLY女装专场'
            , '七匹狼SEPTWOLVES男装专场'
            , '苏醒的乐园女装特惠专场'
            , '丽丽lily女装专场'
            , '季末特惠-金菊羊毛男女装混合专场'
            , 'ONE MORE特惠专场'
            , '哥弟GIRDEAR女装专场'
            , '珂莱蒂尔koradior女装专场'
            , '伊芙丽eifini女装专场'
            , '唐狮tonlion女装专场'
            , '曼妮芬Maniform内衣专场'
            , '【2件5折】-舒朗SHOW LONG女装专场'
            , '沙发SOFA南北清仓专场'
            , '1件5折-不过时的必备基础款'
            , '百图betu女装-焕新秀'
            , '拉夏贝尔旗下7.modifier女装专场'
            , '欧昵雪OUNIXUE女装专场'
            , '初棉女装专场'
            , '裂帛集团旗下女装专场'
            , '逸阳ESEY女裤专场'
            , '纳薇naivee女装专场'
            , '清仓特惠季'
            , '苏醒的乐园女装专场'
            , '丝柏舍女装专场'
            , '富铤FORTEI男装专场'
            , '索菲丝尔裤子专场'
            , '白鹿语 气质女皇范 女装专场'
            , '莫卡娜女装专场'
            , '邑品YIPIN女装专场'
        ],
        list: []
    };

    componentDidMount() {
        const {imgList, titleList} = this.state;
        let list = [];
        for (let i = 0; i < utils.rand(100, 500); i++) {
            list.push({
                key: utils.uuid(),
                title: titleList[utils.rand(0, titleList.length)],
                image: imgList[utils.rand(0, imgList.length)],
                readNum: utils.rand(1000, 20000),
                maskList: ['豆芽优选']
            });
        }
        this.setState({
            list
        });
    }

    linkToDetail = () => {
        this.props.linkToDetail();
    };
    renderItem = ({item}) => {
        return (
            <View style={[styles.item]}>
                <TouchableOpacity onPress={this.linkToDetail}>
                    <Image source={{uri: item.image}} style={[styles.img]}/>
                    <View style={styles.info}>
                        <View style={styles.infoTop}>
                            <View style={styles.maskList}>
                                {
                                    item.maskList.map((item, index) => {
                                        return (
                                            <View style={styles.maskWrap} key={index}>
                                                <Text style={styles.mask}>{item}</Text>
                                            </View>
                                        );
                                    })
                                }
                            </View>
                            <View style={styles.readNumWrap}>
                                <Image source={require('./img/read_icon.png')} style={styles.readIcon}/>
                                <Text style={styles.readNum}>{item.readNum}</Text>
                            </View>
                        </View>
                        <View>
                            <Text numberOfLines={1} style={styles.title}>{item.title}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </View>
        );
    };

    render() {
        const {list} = this.state;
        return (
            <FlatList
                data={list}
                renderItem={this.renderItem}
            />
        );
    }
}

const styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        marginBottom: 10,
        padding: 10
    },
    img: {
        width: width - 20,
        height: (width - 20) * .54
    },
    info: {
        paddingTop: 10
    },
    infoTop: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    maskList: {},
    maskWrap: {
        borderRadius: 30,
        backgroundColor: '#fddedb'
    },
    mask: {
        fontSize: 9,
        paddingLeft: 12,
        paddingRight: 12,
        paddingTop: 3,
        paddingBottom: 3,
        color: '#f3301c'
    },
    readNumWrap: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    readIcon: {
        width: 12,
        height: 8,
        marginRight: 5
    },
    readNum: {
        color: '#989898',
        fontSize: 9
    },
    title: {
        color: '#56464a',
        fontSize: 12,
        marginTop: 6
    }
});
